
<template>
  <div>
    <nav-bar class="detail-top-nav">
      <template v-slot:left>
        <div  @click="backClick">
          <img src="~assets/img/common/back.svg" alt="" />
        </div>
      </template>
      <template v-slot:center>
        <ul class="top-center">
          <li 
            v-for="(item, index) in titles" 
            :key="index" 
            @click="titleClick(index)" 
            :class="{active:index === currentIndex}">
            {{ item }}
          </li>
        </ul>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import navBar from "components/common/navBar/NavBar";
export default {
  name: "NavBar",
  data() {
    return {
      titles: ["商品", "参数", "评论", "推荐"],
      currentIndex:0
    };
  },
  components: { navBar },
  methods: {
    backClick(){
      this.$router.go(-1)
    },
    titleClick(index){
      this.currentIndex = index
    }
  },

  created() {},
};
</script>

<style lang='scss' >
.detail-top-nav {
  position: relative;
  background: #fff;
  z-index: 1;
  .left {
    display: flex;
    justify-content: center;
  }
  .top-center {
    display: flex;
    li {
      flex: 1;
      &.active{
        color:var(--color-high-text);
      }
    }
  }
}
</style>